/**
 * Created by xukj on 2018/6/6.
 */

import React from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  FlatList,
  Text,
} from 'react-native';
import TextButton from '../../components/TextButton';
import AdBanner from '../../components/AdBanner';
import Colors from '../../constants/Colors';
import PropTypes from 'prop-types'
import AdCellItem from './AdCellItem';
import ArticleCellItem from './ArticleCellItem';

export default class Home extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ADs: [
        {uri: 'https://mmbiz.qpic.cn/mmbiz_jpg/pplfDtibDv9GzmDgehP8Ra5BDicZQeBTAxEu1aGqCBqIl6OTSLIjexzrLkNc2iaG3EIpm9UtAJM15qEdW0mGbDicCQ/0?wx_fmt=jpeg', id: '01'},
        {uri: 'https://mmbiz.qpic.cn/mmbiz_jpg/UibQcMf2dm0XLBGaCRLyJic496yF72ibgic99KWCmJxjpqvOUXF7a7xia2WL5TicibLkMn6OjOdGYaX3w7q9q9snrJKTA/0?wx_fmt=jpeg', id: '02'},
        {uri: 'https://mmbiz.qpic.cn/mmbiz_jpg/3CFxwpiasZAjletPoTMia2IB4qBWkibYibLm3MWSNeMqYVHJIicbIL2XyX2xS0OMmp9PMqFAxozW1OD8TPQ1v0iciayiaA/0?wx_fmt=jpeg', id: '03'},
        {uri: 'https://mmbiz.qpic.cn/mmbiz_jpg/CheoVsY3rgWlsCZATUIhrv0nrK9Ijr2MxtAYOLrty7QCQdWpgiaoWfmZoscn8HflXRQdQMdyy05Yurn6MduuXww/0?wx_fmt=jpeg', id: '04'}
      ],
      content: [
        {key: 'article', article: {content: {title: '标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长标题很长', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'ad', ad: {title: '广告标题', content: '广告内容', image: 'https://mmbiz.qpic.cn/mmbiz_jpg/CheoVsY3rgWlsCZATUIhrv0nrK9Ijr2MxtAYOLrty7QCQdWpgiaoWfmZoscn8HflXRQdQMdyy05Yurn6MduuXww/0?wx_fmt=jpeg', video: ''}},
        {key: 'article', article: {content: {title: '标题', content: '内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长内容很长'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        // {key: 'stores', stores: [
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        // ]},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        // {key: 'stores', stores: [
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        //   {key: 'store'},
        // ]},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'ad', ad: {title: '广告标题', content: '广告内容', image: 'https://mmbiz.qpic.cn/mmbiz_jpg/CheoVsY3rgWlsCZATUIhrv0nrK9Ijr2MxtAYOLrty7QCQdWpgiaoWfmZoscn8HflXRQdQMdyy05Yurn6MduuXww/0?wx_fmt=jpeg', video: ''}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'article', article: {content: {title: '标题', content: '内容'}, footer: {agree: 489321, comment: 56332}}},
        {key: 'ad', ad: {title: '广告标题', content: '广告内容', image: 'https://mmbiz.qpic.cn/mmbiz_jpg/CheoVsY3rgWlsCZATUIhrv0nrK9Ijr2MxtAYOLrty7QCQdWpgiaoWfmZoscn8HflXRQdQMdyy05Yurn6MduuXww/0?wx_fmt=jpeg', video: ''}},
      ]
    };
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <View style={styles.header}>
          <TextInput style={styles.search} placeholder="请输入要搜索的关键字" />
          <TextButton containerStyle={styles.publish} text="提问" onPress={this._onPublishPress} />
        </View>
        <FlatList
          data={this.state.content}
          style={{flex: 1, backgroundColor: Colors.gray05}}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this._renderListItem}
        />
      </View>
    );
  }

  _renderListItem = ({item}) => {
    if (item.key === 'ad') {
      return this._renderAd(item);
    }
    else if (item.key === 'article') {
      return this._renderArticle(item);
    }
    else {
      return null;
    }
  };

  _renderAdsBanner = () => (
    <View style={{height: 120}}>
      <AdBanner style={styles.AD} data={this.state.ADs} onPress={(item, index) => this._onAdPress(item.id)} />
    </View>
  );

  _renderArticle = (data) => (
    <ArticleCellItem data={data} />
  );

  _renderAd = (data) => (
    <AdCellItem data={data} />
  );

  _renderStores = ({stores}) => (
    <FlatList style={styles.storeContainer} />
  );

  _renderStore = ({store}) => (
    <View style={styles.store}></View>
  );

  _onPublishPress = () => {
    this._updateNavTitle('去发布页');
  };

  _onAdPress = (adId) => {
    this._updateNavTitle('去指定的广告页:' + adId);
  };

  // 更新导航栏标题
  _updateNavTitle = (title) => {
    this.setState({
      behavior: title,
    });

    this.props.navigation.setParams({
      title: title,
    });
  }
}

Home.propTypes = {
  mainPageTo: PropTypes.string,
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    height: 44,
    alignItems: 'center',
    paddingLeft: 14,
    paddingRight: 14,
    backgroundColor: 'white',
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: Colors.gray03,
  },
  search: {
    height: 30,
    flex: 1,
    borderWidth: 1,
    borderColor: Colors.gray03,
    borderRadius: 4,
    paddingLeft: 8,
  },
  publish: {
    height: 40,
    width: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 14,
  },
  AD: {
    flex: 1,
  },
  article: {

  },
  storeContainer: {

  },
  store: {

  },
});